<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .testDiv{
        width:300px;
        height:300px;
        margin:5px auto;
        background-color:red;
    }
</style>
<body>
    <div class="testDiv"></div>

    <div class="testDiv"></div>
</body>
</html>
<script src="./js/zeptop.js"></script>
<script src="./js/hammer.js"></script>
<script>
//创建一个新的hammer对象并且在初始化时指定要处理的dom元素
$(function(){
    // Get a reference to an element
    var square = $('.testDiv')[0];

    // Create a manager to manager the element
    var hammer = new Hammer(square);
    hammer.on('doubletap', function (e) {
        console.log(e.type)
    });

    hammer.add(new Hammer.Pinch());
    hammer.on("pinchin", function (e) {
        // e.stopPropagation(); 
        // e.preventDeault();
        alert("pinchin")
    });


    hammer.on("panleft", function (e) {
        console.log("panleft")
    });
    hammer.on("panright", function (e) {
        console.log("panright")
    });



    hammer.on('doubletap', function (e) {
        alert("doubletap")
    });
});

</script>